<template>
	<div class="contenter" style="width: 72mm; min-height: 300px; height: max-content; background: red; padding: 10px; box-sizing: border-box">
		<div class="title" style="width: 100%; text-align: center; font-size: 22px; font-weight: bold">定制式义齿加工确认单</div>
		<div class="line" style="border: 1px dashed #000"></div>
		<div style="display: flex; align-items: center; justify-content: space-around; margin-top: 3px">
			<div style="width: 100%; text-align: center; font-size: 16px; margin-bottom: 10px"> {{ orderInfo?.order_sn }} </div>
			<div class="prBarcode" style="width: 100%; text-align: center"><img :id="getCurBarcodeId" /></div>
		</div>
		<div style="position: absolute; top: 85px; right: 10px; font-size: 22px" v-if="orderInfo?.hospital?.level_text != '空'">{{ orderInfo?.hospital?.level_text }}</div>
		<div style="position: absolute; top: 70px; right: 10px; font-size: 22px" v-if="orderInfo?.hospital?.hospital_type == 2">N</div>
		<div style="position: absolute; top: 60px; left: 10px; font-size: 22px"> 地区：{{ orderInfo.hospital?.area?.title }} </div>
		<div style="width: 100%; font-size: 14px; margin-top: 15px"> 医院名称：{{ orderInfo?.hospital?.title }} </div>
		<div style="width: 100%; display: flex">
			<div style="width: 50%; font-size: 14px">医生姓名：{{ orderInfo.docuser?.nickname }}</div>
			<div style="width: 50%; font-size: 14px">患者姓名：{{ orderInfo.name }}</div>
		</div>
		<div style="width: 100%; display: flex">
			<div style="width: 60%; font-size: 14px">收模日期：{{ formatDate(orderInfo.createtime) }}</div>
			<div style="width: 40%; font-size: 14px">盒号：{{ orderInfo?.box_num }}</div>
		</div>
		<div class="line" style="border-top: 1px dashed #000; margin: 5px 0"></div>
		<div style="width: 100%; display: flex; justify-content: space-around">
			<div style="width: 200px; text-align: center; font-size: 12px">产品名称</div>
			<div style="width: 160px; text-align: center; font-size: 12px">颜色</div>
			<div style="width: 210px; text-align: center; font-size: 12px">牙位</div>
			<div style="width: 60px; text-align: center; font-size: 12px">数量</div>
		</div>
		<div style="width: 100%; display: flex; align-items: center; justify-content: space-around" v-for="(item, index) in orderInfo.items" :key="index">
			<div style="width: 200px; text-align: center; font-size: 12px; text-align: left">{{ item.product.title }}</div>
			<div style="width: 160px; text-align: center; font-size: 12px">{{ item.yase_remark }}</div>
			<div style="width: 210px; text-align: left; font-size: 12px; margin-right: 2px">
				<tooth1 :single_crown="item.single_crown_text" multiple_crown=""></tooth1>
			</div>
			<div style="width: 60px; text-align: center; font-size: 12px">{{ item.num }}</div>
		</div>
		<div class="line" style="border-top: 1px dashed #000; margin-top: 220px"></div>
		<!-- <div style="width: 100%; font-size: 12px; margin: 5px 0">制作习惯：{{ orderInfo?.remark2 }}</div> -->
		<div style="width: 100%; font-size: 12px; margin-top: 5px">制作习惯：</div>
		<div v-for="item in orderInfo?.remark2" style="width: 100%; font-size: 12px">{{ item }}</div>
		<div class="line" style="border-top: 1px dashed #000; margin-top: 5px"></div>
		<!-- <div style="width: 100%; font-size: 12px; margin: 5px 0">制作要求：{{ orderInfo?.remark }}</div> -->
		<div style="width: 100%; font-size: 12px; margin: 5px 0">制作要求：</div>
		<div v-for="item in orderInfo?.remark" style="width: 100%; font-size: 12px">{{ item }}</div>
		<div class="line" style="border-top: 1px dashed #000; margin-top: 5px"></div>
		<div style="width: 100%; font-size: 12px; margin: 5px 0">附件：{{ getfujian() }}</div>
		<div style="width: 100%; text-align: right; font-size: 12px; margin-top: 10px">操作人：{{ getcaozuoren() }}</div>
	</div>
</template>
<script setup>
	import { ref, onMounted, computed, nextTick } from 'vue';
	import { ElMessage } from 'element-plus';
	import { storeToRefs } from 'pinia';
	import { usePrintStore } from '@/store/print/index.js';
	import useConfigMap from '@/store/config/index.js';
	import { sleep } from '@/utils/index';
	import JsBarcode from 'jsbarcode';
	import { generateRandomString } from '@/utils';
	import { formatDate, formatTimestamp } from '@/utils/formatTime';
	import { getOrderDetail } from '@/api/PlaceOrder/index';
	import Cookies from 'js-cookie';
	//打印配置仓库
	const printStore = usePrintStore();
	// 当前打印机索引
	const { BdPrintItem } = storeToRefs(printStore);

	// 牙色、设计要求仓库
	const configMap = useConfigMap();
	// 牙色、设计要求
	const { Tcolor, Yrequire } = storeToRefs(configMap);

	// 随机生成字符串包括大小写
	const getCurBarcodeId = computed(() => generateRandomString(20));

	//订单内容
	const orderInfo = ref('');

	//获取附件字段
	const getfujian = () => {
		if (!orderInfo.value) {
			return '';
		}
		let str = [];
		//过滤出为0的
		let arr = orderInfo.value.fittings.filter((item) => item.num != 0);
		if (!arr.length) {
			return '';
		}
		arr.forEach((item) => {
			str.push(item.fittinfo.title + ':' + item.num);
		});
		return str.join(',');
	};

	//获取操作人
	const getcaozuoren = () => {
		let name = Cookies.get('hehe_back_user_username');
		if (!name) {
			return '';
		}
		return name;
	};

	//获取订单信息
	const getOrderInfo = async (task) => {
		let res = await getOrderDetail({ order_sn: task });
		// let res = await getOrderDetail({ order_sn: '2508130003' });
		console.log(res);
		if (res.code != 1) {
			ElMessage.error(res.msg);
			return;
		}
		//分割成数组
		res.data.remark2 = res.data.remark2.split('\n');
		res.data.remark = res.data.remark.split('\n');
		orderInfo.value = res.data;
		drawBarcode();
	};

	// 绘制条形码
	const drawBarcode = async () => {
		await nextTick();
		JsBarcode(`#${getCurBarcodeId.value}`, String(orderInfo.value.order_sn), {
			//设置条之间的宽度
			// width: 1.2,
			width: 1,
			//设置条形码的高度
			// height: Number(60) - 30,
			height: Number(60) - 35,
			//是否在条形码下方显示文字
			displayValue: false,
			//使文字加粗体或变斜体
			fontOptions: '',
			//设置文本的大小
			fontSize: 15,
			//设置条形码周围的空白边距
			margin: 5
		});
		await nextTick();
	};

	// 初始化打印机
	const initPrinter = (index) => {
		let LODOP = getLodop();
		LODOP.PRINT_INIT();
		LODOP.SET_PRINTER_INDEX(index);
		LODOP.SET_SHOW_MODE('HIDE_PAPER_BOARD', 1);
		LODOP.SET_PREVIEW_WINDOW(0, 1, 0, 800, 600, '');
		LODOP.SET_PRINT_MODE('AUTO_CLOSE_PREWINDOW', 1);
		LODOP.SET_SHOW_MODE('LANDSCAPE_DEFROTATED', 1);
		LODOP.SET_PRINT_MODE('CATCH_PRINT_STATUS', true);
		return LODOP;
	};

	// 批量打印确认单
	const batchPrinting = async (task = '') => {
		//获取订单信息
		await getOrderInfo(task);
		await sleep(800);
		const LODOP = initPrinter(BdPrintItem.value.value);
		// LODOP.SET_PRINT_PAGESIZE(0, `72mm`, `72mm`);
		LODOP.SET_PRINT_PAGESIZE(3, `72mm`, `0mm`);
		LODOP.NewPage();
		// LODOP.ADD_PRINT_HTM(0, 0, 'RightMargin:0mm', 'BottomMargin:0mm', `<style>${pubcss.value}</style><body>${document.querySelector('.contenter').innerHTML}</body>`);
		LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', `<body>${document.querySelector('.contenter').innerHTML}</body>`);
		return new Promise(async (resolve) => {
			LODOP.On_Return = () => resolve(true);
			import.meta.env.VITE_PRINT_MODE == 'dev' ? LODOP.PREVIEW() : LODOP.PRINT();
		});
	};

	defineExpose({ batchPrinting });
</script>
<style lang="scss" scoped></style>
